<script lang="ts" setup>
import { reactive } from "vue";
import { ItemData } from "../common/type/base";
import { getIPhoneList } from "../common/api/index";
import ActivityCard from "../components/double/ActivityCard.vue";
import AndroidCard from "../components/double/AndroidCard.vue";
const dataList: ItemData[] = reactive([]);

function backTop() {
	window.scrollTo({
		top: 0,
		left: 0,
		behavior: "smooth"
	})
}
getIPhoneData();
function getIPhoneData() {
	getIPhoneList({
		cate_id: "53",
		convey_type: 1,
		orderby_name: "id",
		sort: "desc",
		size: 1,
		pageSize: 9
	}).then(res => {
		const data = res.data.data;
		dataList.push(...data);
	})
}
</script>
<template>
	<img class="head-bg" src="../assets/images/default/head-bg.png">
	<img class="one_price" src="../assets/images/default/one_price.png">
	<img class="one_title" src="../assets/images/default/one_title.png">
	<div class="default">
		<div class="coupon">
			<div class="left location bold">
				<span class="first">首页</span>
				<span class="title">1</span>
				<span class="price">元</span>
			</div>
			<div class="center location">
				<span class="f14">先领券·再购物</span>
				<div class="detail f16">
					<span class="bold">仅限“新用户”使用</span>
					<span class="time">有效期:2月15日-2月22日</span>
				</div>
				<span class="f12">数量有限 先到先得</span>
			</div>
			<div class="right location bold">
				<span>立即</span>
				<span>领取</span>
			</div>
		</div>
		<activity-card card-title="首月一元爆款" :data-list="dataList"></activity-card>
		<activity-card card-title="苹果专区" :data-list="dataList"></activity-card>
		<android-card card-title="安卓专区"></android-card>
		<div class="back-top" @click="backTop">
			<span class="text">返回顶部</span>
			<div class="right">
				<span></span>
				<span></span>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.head-bg {
	width: 750px;
	object-fit: contain;
}

.one_price {
	position: absolute;
	top: 0px;
	left: 230px;
	width: 300px;
}

.one_title {
	position: absolute;
	top: 100px;
	left: 120px;
	width: 500px;
}

.default {
	background-color: #FFC555;
	width: 750px;
	padding: 15px;
	padding-bottom: 40px;
	margin-top: -15px;

	.coupon {
		width: 718px;
		height: 276px;
		margin-bottom: 20px;
		position: relative;
		background-image: url("../assets/images/default/coupon.jpg");
		background-size: 100% 100%;
		color: #EB0000;
		margin-top: 20px;

		.location {
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.left {
			left: 20%;
			top: 45%;

			.title {
				font-size: 70px;
			}
		}

		.center {
			left: 420px;
			display: flex;
			flex-direction: column;
			align-items: center;
			transform: translate(-50%, -50%) scale(.8);

			.detail {
				margin: 15px 0;
				display: flex;
				align-items: center;
				flex-direction: column;

				.time {
					font-size: 13px;
				}
			}
		}

		.right {
			right: 20px;
			display: flex;
			flex-direction: column;

			span {
				&:first-of-type {
					margin-bottom: 10px;
				}
			}
		}
	}

	.back-top {
		margin-left: 50%;
		margin-top: 20px;
		transform: translateX(-50%);
		width: 196px;
		height: 52px;
		line-height: 52px;
		color: rgba(255, 246, 211, 0.81);
		border-radius: 58px 58px 58px 58px;
		border: 2px solid rgba(255, 246, 211, 0.81);
		display: flex;
		align-items: center;
		justify-content: center;


		.right {
			position: relative;
			margin-top: -6px;
			margin-left: 3px;

			span {
				position: absolute;
				width: 17px;
				height: 3.5px;
				transform-origin: right;
				background-color: rgba(255, 246, 211, 0.81);

				&:nth-of-type(1) {
					transform: rotate(42deg);
				}

				&:nth-of-type(2) {
					transform: rotate(-42deg);
				}
			}
		}
	}
}
</style>
